<template>
  <el-descriptions :column="4" border direction="vertical" style="margin-bottom: 20px;">
    <template #title>
      <el-icon><List /></el-icon>
      <span>费用信息</span>
    </template>
    <el-descriptions-item label="商品合计" label-align="center" align="center">
      ￥{{ prop.amount.totalAmount }}
    </el-descriptions-item>
    <el-descriptions-item label="运费" label-align="center" align="center">
      ￥{{ prop.amount.freightAmount }}
</el-descriptions-item>
<el-descriptions-item label="优惠券" label-align="center" align="center">
-￥{{ prop.amount.couponAmount }}
</el-descriptions-item>
<el-descriptions-item label="积分抵扣" label-align="center" align="center">
-￥{{ prop.amount.integrationAmount }}
</el-descriptions-item>
<el-descriptions-item label="活动优惠" label-align="center" align="center">
-￥{{ prop.amount.promotionAmount }}
</el-descriptions-item>
<el-descriptions-item label="折扣金额" label-align="center" align="center">
-￥{{ prop.amount.discountAmount }}
</el-descriptions-item>
<el-descriptions-item label="订单总金额" label-align="center" align="center">
  <span style="color:#f56c6c">￥{{ prop.amount.totalAmount + prop.amount.freightAmount }}</span>
</el-descriptions-item>
<el-descriptions-item label="应付款金额" label-align="center" align="center">
  <span style="color:#f56c6c">￥{{ shouldPay }}</span>
</el-descriptions-item>
  </el-descriptions>
</template>
<script setup lang="ts">
import { computed } from 'vue';
let prop = defineProps<{
  amount:{
    totalAmount:number;
    freightAmount:number;
    couponAmount:number;
    integrationAmount:number;
    promotionAmount:number;
    discountAmount:number;
  }
}>()

let shouldPay = computed(()=>{
  return prop.amount.totalAmount+prop.amount.freightAmount-prop.amount.couponAmount-prop.amount.integrationAmount-prop.amount.promotionAmount-prop.amount.discountAmount
})
</script>